<template>
  <page-model :breadHeard="breadHeard" @backLast="backLast">
    <desc-title class="mt-20" :descTitle="descTitle"></desc-title>
    <div class="content">
      <el-form :model="videoData" :rules="rules" ref="videoData" label-width="300px">
        <el-form-item label="视频名称：" prop="modelTitle">
          <el-input v-model="videoData.modelTitle" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="视频描述：" prop="modelDescribe">
          <el-input type="textarea" v-model="videoData.modelDescribe"></el-input>
        </el-form-item>
        <el-form-item label="视频封面：" prop="modelImg">
          <el-upload
            class="avatar-uploader"
            :action="uploadImg"
            ref="elUpload"
            list-type="picture-card"
            :before-upload="beforeUpload"
            :on-success="onsuccessUpload"
            :on-error="onError"
            :with-credentials="true"
            :headers="headOfRequest"
            :show-file-list="false"
          >
            <div class="nopic flex-column">
              <img v-if="videoData.modelImg" :src="videoData.modelImg" width="100%" height="100%" />
              <img v-if="!videoData.modelImg" src="@/assets/file/addPic.png" alt width="48px" />
              <div v-if="!videoData.modelImg" class="addpics">添加图片</div>
            </div>
            <span class="pictips">*图片大小小于3M</span>
          </el-upload>
        </el-form-item>
        <el-form-item label="视频：" prop="modelUrl">
          <el-upload
            class="avatar-uploader"
            :action="uploadVideo"
            ref="elUpload"
            list-type="picture-card"
            :before-upload="beforeUpload_vdo"
            :on-success="onsuccessUpload_vdo"
            :on-error='onError'
            :on-progress="on_progress"
            :with-credentials="true"
            :headers="headOfRequest"
            :disabled="!(!modelId)"
            :show-file-list="false"
          >
            <div class="nopic flex-column">
              <video
                v-if="videoData.modelUrl && !isShowProgress"
                :src="videoData.modelUrl"
                width="100%"
                height="100%"
                controls
              ></video>
              <el-progress
                type="circle"
                v-show="isShowProgress"
                :percentage="percentage"
                :show-text="isShowText"
                :stroke-width="stroke_width"
                :color="circleColor"
              ></el-progress>
              <img
                v-if="!videoData.modelUrl && !isShowProgress"
                src="@/assets/file/addPic.png"
                alt
                width="48px"
              />
              <div v-if="!videoData.modelUrl && !isShowProgress" class="addpics">添加视频</div>
            </div>
            <span class="pictips">*视频文件大小小于500M</span>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="addBtn">
        <span class="confirm flex-center" @click="confirmAdd">确定</span>
      </div>
    </div>
  </page-model>
</template>

<script>
import { uploadImg, uploadVideo } from '@/api/file'
import { getToken } from '@/utils/token'
export default {
  data () {
    return {
      uploadImg: uploadImg,
      uploadVideo: uploadVideo,
      // 上传图片组件的请求头设置
      headOfRequest: { token: getToken() },
      breadHeard: {
        title: '添加视频',
        firstBread: '基坑扫描 ',
        secondBread: '添加'
      },
      descTitle: '视频信息',
      isShowProgress: false,
      isShowText: false,
      stroke_width: 10,
      circleColor: '#75FF6D',
      percentage: 0,
      videoId: '',
      imageId: '',
      videoData: {
        modelTitle: '',
        modelDescribe: '',
        modelImg: '',
        modelUrl: ''
      },
      rules: {
        modelTitle: [
          { required: true, message: '请输入视频名称', trigger: 'blur' }
        ],
        modelImg: [
          { required: true, message: '请添加视频封面', trigger: 'blur' }
        ],
        modelUrl: [
          { required: true, message: '请添加视频', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    modelId () {
      return sessionStorage.getItem('modelId')
    }
  },
  methods: {
    backLast () {
      this.$router.push('/baseHoleScanMain')
    },
    // 图片上传之前的钩子
    beforeUpload (file) {
      // console.log(file)
      if (file.type.indexOf('image') !== -1) {
        const testmsg = /^image\/(jpg|JPG|jpeg|png|PNG|bmp|BMP)$/.test(
          file.type
        )
        const limit = file.size / 1024 / 1024 <= 3
        if (!testmsg) {
          this.$message.error('图片格式错误')
          return false
        }
        if (!limit) {
          this.$message.error('上传图片大小不能超过3M!')
          return false
        }
        return testmsg && limit
      }
    },
    beforeUpload_vdo (file) {
      const testmsg = /^video\/(mp4|avi|rmvb|ts|flv|wmv|m2v|mkv)$/.test(
        file.type
      )
      const limit = file.size / 1024 / 1024 <= 300
      if (!testmsg) {
        this.$message.error('视频格式错误')
        return false
      }
      if (!limit) {
        this.$message.error('上传图片大小不能超过300M!')
        return false
      }
      this.isShowProgress = true
      return testmsg && limit
    },
    // 上传成功的钩子
    onsuccessUpload (res, file) {
      // console.log(file)
      this.imageId = file.response.data.id
      this.videoData.modelImg = file.url
    },
    onsuccessUpload_vdo (res, file) {
      this.isShowProgress = false
      this.videoId = file.response.data.id
      this.videoData.modelUrl = file.url
    },
    on_progress (event, file, fileList) {
      // console.log(event, file)
      this.percentage = event.percent
    },
    onError (err) {
      this.$message.error(err.message || '上传失败')
    },
    confirmAdd () {
      const params = { ...this.videoData, modelImg: this.imageId, modelUrl: this.videoId }
      this.$refs.videoData.validate((valid) => {
        if (valid) {
          if (this.modelId) {
            // 编辑
            params.modelId = +this.modelId
            this.$store.dispatch('spectrumScan/editModelData', params).then((res) => {
              if (res.data.code === 200) {
                this.$message({
                  message: '编辑成功',
                  type: 'success',
                  duration: 500
                })
                this.$router.push('/baseHoleScanMain')
              } else {
                this.$message({
                  message: res.data.message,
                  type: 'error',
                  duration: 500
                })
              }
            })
            return
          }
          // 添加
          this.$store.dispatch('spectrumScan/addModelData', params).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                message: '添加成功',
                type: 'success',
                duration: 500
              })
              this.$router.push('/baseHoleScanMain')
            } else {
              this.$message({
                message: res.data.message,
                type: 'error',
                duration: 500
              })
            }
          })
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    judgePageType () {
      if (this.modelId) {
        this.breadHeard = {
          title: '编辑视频',
          firstBread: '基坑扫描 ',
          secondBread: '编辑'
        }
        this.$store.dispatch('spectrumScan/viewModelData', +this.modelId).then(async (res) => {
          if (res.data.code === 200 && res.data.data) {
            const data = res.data.data
            const modelImg = await this.$_makeMediaSrc(data.modelImg)
            this.videoData.modelImg = modelImg
            const modelUrl = await this.$_makeMediaSrc(data.modelUrl)
            this.videoId = data.modelUrl
            this.imageId = data.modelImg
            this.videoData = {
              ...data, modelImg, modelUrl
            }
          }
        })
      }
    }
  },
  mounted () {
    this.judgePageType()
  }
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #fff;
  min-height: calc(100% - 201px);
  margin-bottom: 30px;
  ::v-deep .el-form {
    padding-bottom: 10px;
    .el-input {
      width: 400px;
    }
    .el-textarea {
      width: 560px;
      height: 170px;
      .el-textarea__inner {
        height: 100%;
      }
    }
    .el-form-item__label {
      width: 300px !important;
      text-align: right;
    }
    .el-form-item__error {
      padding-left: 168px;
    }
    .el-form-item.is-required:not(.is-no-asterisk)
      > .el-form-item__label:before {
      content: "*";
      color: #4868ff;
      margin-right: 4px;
    }
  }
  ::v-deep .el-upload--picture-card {
    width: 390px;
    height: 220px;
    background-color: #fff;
    .nopic {
      height: 100%;
      align-items: center;
      justify-content: center;
      position: relative;
      .addpics {
        line-height: 20px;
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(200, 200, 200, 1);
      }
    }
    .pictips {
      line-height: 20px;
      position: absolute;
      top: 0;
      left: 721px;
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 180, 21, 1);
      cursor: default;
    }
    .el-progress-circle {
      width: 40px !important;
      height: 40px !important;
    }
  }
}
.addBtn {
  padding-left: 300px;
  padding-bottom: 30px;
  .confirm {
    width: 172px;
    height: 48px;
    background: rgba(72, 104, 255, 1);
    border-radius: 24px;
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
  }
}
</style>
